<template>
    <view class="order-row" v-if="lists&&lists.length">
      <scroll-view class="scroll-view" scroll-y @scrolltolower="onReachBottom">
        <view v-for="(item, index) in lists" :key="index" class="order-item" @click="goLink(item)">
          <view class="order-header dis-f justify-between">
            <view class="base-ellipsis" v-if="item.ebMerName"> {{ item.title }}-{{ item.ebMerName }} </view>
            <view class="base-ellipsis" v-else> {{ item.title }} </view>
            <view v-if="item.payPrice" class="font-semibold" style="max-width: 200rpx;color: red;"> -{{ item.payPrice }} </view>
            <view v-else-if="item.number" class="font-semibold" style="max-width: 200rpx;color: red;"> {{ item.number }} </view>
          </view>
          <view class="order-time color777 font-s12 mgt-1"> {{ item.add_time }} </view>
          <view class="divider"></view>
        </view>
        <view v-if="loading" class="loading">加载中...</view>
      </scroll-view>
    </view>
     <view v-else style="text-align: center; padding: 10px; display: flex; flex-direction: column; align-items: center">
    <image class="" mode="aspectFit" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/25/zwsj_20250325090754A001.png"> </image>
    <span style="font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 28rpx; color: #a8a8a8; line-height: 40rpx; text-align: center; font-style: normal">暂无记录</span>
  </view>
  </template>
  
  <script>
  import { userBill } from "../../../utils/merorder/mer"
  export default {
    data() {
      return {
        lists: [],
        goodScroll: true,
        loading: false,
        page: 1,
      };
    },
    onLoad() {
      this.userBill();
    },
    methods: {
      userBill() {
        this.loading = true;
        if (!this.goodScroll) return;
        // 假设userBill是获取数据的函数
        userBill({
          uid: uni.getStorageSync('uid'),
          limit: 20,
          page: this.page,
        }).then((res) => {
          this.goodScroll = res.data.length >= 20;
          this.loading = false;
          this.page++;
          this.lists = this.lists.concat(res.data || []);
        });
      },
      goLink(data) {
        uni.navigateTo({
          url: "/pages_h5/myCenter/components/payListDetil?linkId=" + data.id,
        });
      },
      onReachBottom() {
        if (this.page !== 1) {
          this.userBill();
        }
      },
    },
  };
  </script>
  
  <style lang="less" scoped>
  .order-row {
    width: 100%;
    height: 100%;
  }
  
  .scroll-view {
    height: 100%;
  }
  
  .order-item {
    background-color: #fff;
    padding: 16rpx;
    margin-bottom: 10rpx;
  }
  
  .order-header {
    display: flex;
    justify-content: space-between;
  }
  
  .base-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .font-semibold {
    font-weight: 600;
  }
  
  .order-time {
    margin-top: 10rpx;
    color: #777;
    font-size: 24rpx;
  }
  
  .divider {
    height: 2rpx;
    background-color: #eee;
    margin-top: 20rpx;
  }
  
  .loading {
    text-align: center;
    padding: 20rpx;
    color: #666;
  }
  </style>
  